<script lang="ts" setup>
import { useGlobalDialog } from '@/hooks'
import { initPageDTO, initPageVO, type PageDTO, type PageVO, type ResultType } from '@/type/type'
import { useSystemStore } from '@/stores/system'
import { delTreeHoleApi, getTreeHoleAdminPageApi, type TreeHole } from '@/request/api/tree_hole'

const { globalDialog } = useGlobalDialog()
const systemStore = useSystemStore()
// 多选框 id
const ids = ref<number[]>([])
/** 查询列表 */
const pageVO = ref<PageVO<TreeHole>>(initPageVO())

const page = ref<PageDTO>(initPageDTO())

const getList = () => {
  getTreeHoleAdminPageApi(page.value).then((res: ResultType<PageVO<TreeHole>>) => {
    pageVO.value = res.data
  })
}
// 多选框选中数据
const handleSelectionChange = (selection: TreeHole[]) => {
  ids.value = selection.map((item) => item.id)
}

/** 删除按钮操作 */
const handleDelete = async (idArr: Array<number>) => {
  await globalDialog('确定删除 ID 为"' + idArr + '"的留言?').then((res: boolean) => {
    if (res) {
      delTreeHoleApi(idArr).then((res: ResultType<boolean>) => {
        if (res.data) {
          getList()
        }
      })
    }
  })
}

onMounted(() => {
  getList()
})
</script>

<template>
  <el-container class="pt-5 gap-3" direction="vertical">
    <el-container class="pb-2 px-5" direction="vertical">
      <el-container class="gap-3">
        <el-button
          :disabled="ids.length === 0"
          class="!px-2 !m-0"
          plain
          type="danger"
          @click="handleDelete(ids)"
        >
          <SvgIcon message="删除" name="delete" />
        </el-button>
      </el-container>
    </el-container>

    <el-table :data="pageVO.list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="35" />
      <el-table-column label="ID" prop="id" width="120" />
      <el-table-column label="IP地址" prop="ip" width="160" />
      <el-table-column label="头像" width="80">
        <template #default="scope">
          <el-avatar
            :size="50"
            :src="scope.row.avatar"
            @click="systemStore.imgPreview.imgUrl = scope.row.avatar"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="200" />
      <el-table-column label="内容" prop="content" />
    </el-table>
    <PageBox
      :total="pageVO.total"
      @update="
        (args: PageDTO) => {
          page = args
          getList()
        }
      "
    />
  </el-container>
</template>
